<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { register, sendRegisterCode } from '@/api/user'
import type { RegisterForm } from '@/types/user'
import { ElMessage } from 'element-plus'

const router = useRouter()

const registerForm = ref<RegisterForm>({
  username: '',
  password: '',
  email: '',
  verificationCode: '',
  nickname: ''
})

const loading = ref(false)
const codeLoading = ref(false)
const countdown = ref(0)
let timer: number | null = null

const handleRegister = async () => {
  try {
    loading.value = true
    const response = await register(registerForm.value)
    ElMessage.success('注册成功')
    router.push({ name: 'login' })
  } catch (error) {
    console.error('注册失败:', error)
    ElMessage.error('注册失败，请检查输入信息')
  } finally {
    loading.value = false
  }
}

const sendVerificationCode = async () => {
  if (!registerForm.value.email) {
    ElMessage.warning('请输入邮箱地址')
    return
  }

  try {
    codeLoading.value = true
    await sendRegisterCode(registerForm.value.email)
    ElMessage.success('验证码已发送')
    countdown.value = 60
    timer = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--
      } else if (timer) {
        clearInterval(timer)
        timer = null
      }
    }, 1000)
  } catch (error) {
    console.error('发送验证码失败:', error)
    ElMessage.error('发送验证码失败')
  } finally {
    codeLoading.value = false
  }
}
</script>

<template>
  <div class="register-container">
    <el-card class="register-card">
      <h2 class="register-title">云图书馆 - 注册</h2>
      <el-form
        :model="registerForm"
        label-width="100px"
        label-position="top"
        @submit.prevent="handleRegister"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="registerForm.username"
            placeholder="4-20个字符"
            clearable
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="6-20个字符"
            show-password
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="registerForm.email"
            placeholder="请输入邮箱地址"
            clearable
          />
        </el-form-item>
        <el-form-item label="验证码" prop="verificationCode">
          <div class="code-input">
            <el-input
              v-model="registerForm.verificationCode"
              placeholder="请输入验证码"
              clearable
            />
            <el-button
              type="primary"
              :disabled="countdown > 0"
              :loading="codeLoading"
              @click="sendVerificationCode"
            >
              {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input
            v-model="registerForm.nickname"
            placeholder="请输入昵称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            native-type="submit"
            :loading="loading"
            class="register-button"
          >
            注册
          </el-button>
        </el-form-item>
      </el-form>
      <div class="register-footer">
        <router-link :to="{ name: 'login' }">已有账号？立即登录</router-link>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.register-card {
  width: 500px;
  padding: 20px;
}

.register-title {
  text-align: center;
  margin-bottom: 30px;
  color: #409eff;
}

.code-input {
  display: flex;
  gap: 10px;
}

.register-button {
  width: 100%;
}

.register-footer {
  text-align: center;
  margin-top: 20px;
  color: #606266;
}

.register-footer a {
  color: #409eff;
  text-decoration: none;
}
</style>
